﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>SOSOMap_TestOverLay</title>
<style type="text/css">
body, button, input, select, textarea {
font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
</style>
<script charset="utf-8" src="http://api.map.soso.com/v1.0/main.js"></script>
<script>
//地图初始化
function init() {
	marker = null;
	label = null;
	map = new soso.maps.Map(document.getElementById("container"), {
		// 地图的中心地理坐标。
		center: new soso.maps.LatLng(39.916527,116.397128),
		zoomLevel:13
	});
}
//添加标记
function addMarker(){
	if(marker){
		marker.setMap(map);
		return;
	}
	marker = new soso.maps.Marker({
		position:new soso.maps.LatLng(39.916527,116.397128),
		map:map
	});
}
//添加文本标注
function addLabel(){
	if(label){
		label.setMap(map);
		return;
	}
	label = new soso.maps.Label({
		position:new soso.maps.LatLng(39.916527,116.397128),
		map:map,
		content:'文本标注'
	})
}
//清除标记
function clearOverLays(){
	if(marker){
		marker.setMap(null);
	}
	if(label){
		label.setMap(null);
	}
}
//标记点击事件
function clickMarker(){
	var info = new soso.maps.InfoWindow({
		map:map
	});
	soso.maps.Event.addListener(marker, 'click', function(){
		info.open('<div style="text-align:center;white-space:nowrap;margin:10px;">单击了标记</div>',
			marker);
	});
}
//可拖动的标记
function draggableMarker(){
	if(marker){
		marker.setDraggable(true);
	}
}
//跳动的标记
function junpingMarker(){
	if(marker){
		marker.setAnimation(soso.maps.Animation.JUMP);
		soso.maps.Event.addListener(map, 'click', function(event){
			marker.setPosition(event.latLng);
		});
	}
}
//装饰标记
function decorMarker(){
	if(marker){
		var decor = new soso.maps.MarkerDecoration({
			content:'A',
			margin:new soso.maps.Size(0,-4),
			align:soso.maps.ALIGN.CENTER,
			marker:marker
		});
	}
}
//自定义标记
function selfDefMarker(){
	var anchor = new soso.maps.Point(6, 6),
		size = new soso.maps.Size(24,24),
		icon = new soso.maps.MarkerImage('img/haha.gif', size, anchor);
	marker = new soso.maps.Marker({
		icon:icon,
		map:map,
		position:map.getCenter()
	});
}
//折线覆盖物
function addPolyline(){
	var polyline = new soso.maps.Polyline({
		path:[
			new soso.maps.LatLng(39.910, 116.399),
			new soso.maps.LatLng(39.920, 116.405),
			new soso.maps.LatLng(39.930, 116.420)
			],
		strokeColor:'#0000ff',
		strokeWeight:10,
		strokeOpacity:0.5,
		map:map
	});
}
//添加一个圆
function addCircle(){
	var circle = new soso.maps.Circle({
		center:map.getCenter(),
		radius:2000,
		map:map
	});
}
//添加信息窗口
function addInfoWindow(){
	var infoWin = new soso.maps.InfoWindow({
		map:map
	});
	infoWin.open('Hello World', map.getCenter());
}
//HTML内容填充的信息窗口
function htmlInfoWindow(){
	var htmlInfoWin = new soso.maps.InfoWindow({
		map:map
	});
	htmlInfoWin.open('<div style="width:200px;padding-top:10px;">\
	<img style="float:left;" src="img/keai.gif"/>\
	你是个可爱的小孩子</div>', map.getCenter());
}
//自定义信息窗口的样式（工程浩大，所以测试暂略）
//设置信息窗口的动画
function infoWinAnimation(){
	var htmlInfoWin = new soso.maps.InfoWindow({
		map:map
	});
	htmlInfoWin.setAnimation(soso.maps.Animation.POP);
	htmlInfoWin.open('<div style="width:200px;padding-top:10px;">\
	<img style="float:left;" src="img/keai.gif"/>\
	你是个可爱的小孩子</div>', map.getCenter());
}
</script>
</head>
<body onload="init();">
<div style="width:650px;height:400px" id="container"></div> 
<input value="添加标记" type="button" onclick="addMarker();"/>
<input value="添加文本标注" type="button" onclick="addLabel();"/>
<input value="清除标记" type="button" onclick="clearOverLays();"/>
<input value="添加标记单击事件" type="button" onclick="clickMarker();"/>
<input value="使标记可以拖动" type="button" onclick="draggableMarker();"/>
<input value="使标记可以跳动" type="button" onclick="junpingMarker();"/>
<input value="装饰标记" type="button" onclick="decorMarker();"/><br/>
<input value="添加自定义标记" type="button" onclick="selfDefMarker();"/>
<input value="添加折线覆盖物" type="button" onclick="addPolyline();"/>
<input value="添加圆" type="button" onclick="addCircle();"/>
<input value="添加信息窗口" type="button" onclick="addInfoWindow();"/>
<input value="添加HTML信息窗口" type="button" onclick="htmlInfoWindow();"/>
<input value="添加HTML动画信息窗口" type="button" onclick="infoWinAnimation();"/>
</body>
</html>